@extends('layouts.back_stage')
@section('content')
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/element-2.4.1.css">
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/vue.js?v0.0.3"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/element-2.4.1.js"></script>
    <div class="container">
        <div class="row">
            <div style="padding: 20px;">
                <h3 >编辑管理员角色</h3>
            </div>
            <div class="col-md-12">
                <div id="app" v-cloak>
                    <el-row style="padding: 20px;background-color: #fff;">
                        <button type='button' style="float:right;background:#16a2fb" class='btn btn-success'  @click="check({{$id}})">提交</button>
                        <label>所属机构 &nbsp;&nbsp;</label>
                       <el-cascader style="width:300px;margin:0 0 20px 0" :options="companyList" v-model="company" :change-on-select="true" size="small"></el-cascader>
                           <br>
                       <label>&nbsp;&nbsp;部门名 &nbsp;&nbsp;</label>
                            <el-select  size="small" v-model="type" style="width:300px;margin:0 0 20px 0" class="ingred_sel" @focus="typeFocus">
                                <el-option  v-for="(item,index) in bumen" :key="item.index" :value="item.id" :label="item.department"> @{{item.department}}</el-option>
                            </el-select>
                        <span style="margin-bottom:10px;display: block;">
                            用户名：
                            <el-input v-model="user_name" placeholder="" size="small" style="width:150px;"></el-input>
                            手机号：
                            <el-input v-model="phone" placeholder="" size="small" style="width:150px;"></el-input>
                        </span>
                        <span style="margin-bottom:10px;display: block;">
                            角色名：
                            <el-select v-model="choose_role" @change="changeRole" size="small" @focus="qqq">
                                <el-option v-for="item in role_name_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </span>
                        <el-collapse v-model="activeNames" size="small" v-if="checkList != ''">
                            <el-collapse-item v-for="(item,index) in data" :title="item.name" :name="item.id" :key="item.id" v-show="checkShow(item.id)">
                                <el-card class="box-card" v-for="page in item.child" :key="page.name" style="margin-bottom:15px;" v-show="checkShow(page.id)">
                                    <div slot="header" class="clearfix">
                                        <span>@{{ page.name }}</span>
                                    </div>
                                    <div class="text item">
                                        <label v-for="box in page.child" :key="box.id">
                                            <el-tag v-show="checkShow(box.id)" style="margin-right:10px;">@{{box.name}}</el-tag>
                                        </label>
                                    </div>
                                </el-card>
                            </el-collapse-item>
                        </el-collapse>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
    @include('errors.list')
    <script>
        const role_id = '{{ $userinfo->role_id }}'
        var app = new Vue({
            el:'#app',
            data() {
                return {
                    data:[],
                    activeNames:[],
                    companyList:[],
                    company:[],
                    companyValue:[],
                    bumen:[],
                    type:'',
                    type_id:'',
                    companyId:'',
                    checkList:[],
                    maxAll:false,
                    choose_role:'',
                    role_name_list:[],
                    user_name:'',
                    phone:'',
                    updataId:'',
                    dataId:'',
                }
            },
            mounted(){
                this.dataId=window.location.href.split('=')[1];
                this.updataId=this.dataId.split('&')[0]
                this.getNode()
                this.roleName()
                this.request()
                this.getCompanyList();
            },
            methods: {
                qqq(){
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: `/distribute/role/getall?id=${this.company}`,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                               console.log(11111,res)
                            }else{

                            }
                        },
                    
                    });
                },
                getCompanyList(){
                    let that=this
                    let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                       
                         for(var e in res.content[1]){
                            this.companyValue=res.content[1]
                         }
                        if(res.result.success){
                            clients=res.content[1]
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
              },
                typeFocus(){
                    let that=this
                    if(this.company.legth==1){
                        this.companyId=this.company
                    }
                    this.companyId=this.company[this.company.length-1]
                 $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: `/departments/getall?id=${this.companyId}`,
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                       that.bumen=res.content
                      }
                    })
                },
                roleName(){
                    // let self = this
                    // console
                    // $.ajax({
                    //     headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    //     url: `/distribute/role/getall?id=${this.companyId}`,
                    //     type: 'get',
                    //     data: {
                    //     },
                    //     dataType: 'json',
                    //     success: function(res) {
                    //         if(res.result.success == true){
                    //             let option = []
                    //             for(let value of res.content){
                    //                 option.push({"label":value.rolename,"value":value.id})
                    //             }
                    //             self.role_name_list = option
                    //             self.choose_role = Number(role_id)
                    //         }else{

                    //         }
                    //     },
                    //     error: function() {
                    //     }
                    // });
                },
                changeRole(){
                    
                    this.getChooseNode(this.choose_role)
                },
                getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                                self.getChooseNode(role_id)
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                checkShow(id){
                    if(this.checkList.indexOf(id) == -1){
                        return false
                    }else{
                        return true
                    }                    
                },
                getChooseNode(role_num){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/has_node/'+role_num,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                self.roleName = res.content.data.rolename
                                let data = res.content.data.roles_node
                                data = data.split(',')
                                let numberData = []
                                for(let value of data){
                                    numberData.push(Number(value))
                                }
                                self.checkList = numberData
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                            
                        },
                        error: function() {
                        }
                    });
                },
                //请求
                request(){
                    let that=this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: `/distribute/admin/show?id=${this.updataId}`,
                        type: 'get',
                        dataType: 'json',
                        success: function(res) {
                            if(res.content.department==null){
                                res.content.department=[]
                            }
                            console.log(res.content.tree.split('-').slice(1,-1))
                           that.company.parseInt(res.content.tree.split('-').slice(1,-1))
                           console.log(that.company)
                           // that.company.push(res.content.client.id),
                            that.type=res.content.department.id,
                            that.user_name=res.content.admin_name,
                            that.phone=res.content.admin_tel,
                            that.choose_role=res.content.role.rolename
                          
                        }
                    }) 
                },
                check(id){
                    let that=this
                   var companyId=that.company[that.company.length-1]
                     $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                            },
                            type:'put',
                            url:'/distribute/admin/update',
                            data:{
                                'user_id':id, 
                                'company_id':companyId,
                                'department_id':that.type,
                                'username':that.user_name,
                                'phone':that.phone,
                                'role_id':that.choose_role
                            },
                            dataType:'json',
                            success: function (data) {
                                if (data.success == true) {
                                    console.log(data)
                                   // window.location.href = '/distribute/admin/indexpage'+num;
                                }else{
                                    that.$notify({
                                    title: '提示',
                                    message:data.content
                                  }); 
                                }
                            }
                        });
                },
            },
        })
        /*全选*/
        $('.all').click(function () {
            var id = $(this).attr('title');
            $('input[abc='+id+']').prop('checked',this.checked);
        });
        $('.gou').click(function () {
            var num = $(this).attr('abc');
            var n=0;
            for(var i=0; i<$('input[abc='+num+']').length;i++){
                if($('input[abc='+num+']')[i].checked){
                    n++;
                }
            }
            if(n>0){
                $('input[title='+num+']').prop("checked", true);
            }else{
                $('input[title='+num+']').prop("checked", false);
            }
        });
        /*提交*/
        // function check(id) {
        //     let that=this
        //     var num='{{ $_GET['num'] }}';
        //     var user_id= '{{ $_GET['id'] }}';
        //     var company_id= $('.company_id').val();
        //     var department_id= $('.department_id').val();
        //     $.ajax({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        //         },
        //         type:'post',
        //         url:'/admin/updateUserNode',
        //         data:{
        //             'user_id':user_id,
        //             'company_id':company_id,
        //             'department_id':department_id,
        //             'username':app.user_name,
        //             'phone':app.phone,
        //             'role_id':app.choose_role
        //         },
        //         dataType:'json',
        //         success: function (data) {
        //             if (data.success == true) {
        //                 window.location.href = '/distribute/admin/indexpage'+num;
        //             }
        //         }
        //     });
        // }
    </script>
@endsection